<template lang="html">
  <div class="all-movement">
    <HomeNav />
    <div class="banner">
			<div class='daka'>今日打卡</div>
			<div class="info">
				<img src="../../../assets/images/walk-face/walk2.png" alt="">
				<span class="letter">{{ getStateUserinfo }}</span>
				<span class="tiao">
					<span class="black-tiao"></span>
					<span class='wen-ben'>再锻炼100分钟升级为ME.4</span>
				</span>
			</div>
		</div>
    <div class="circle">

    </div>
    <div class="separate-line"></div>
    <div class="recommend">
      <div class="active">
        <h2>推荐活动</h2>
        <CourseHttp />
      </div>
    </div>
  </div>
</template>

<script>
import HomeNav from '../../../components/HomeNav';
import CourseHttp from '../../../components/CourseHttp';
import { mapGetters } from "vuex"
export default {
  computed:{
    ...mapGetters(["getStateUserinfo"])
  },
  components: {
    HomeNav,
    CourseHttp
  }
}
</script>

<style lang="less">
.all-movement{
  .banner{
    margin-top: 45px;
		width:100%;
		height:133/100rem;
		background-color: #fed906;
		overflow: hidden;
		.daka{
			width:120/100rem;
			height:50/100rem;
			background-color: #1c1c1c;
			margin-top: 40/100rem;
			margin-left: 31/100rem;
			border-radius: 40/100rem;
			color:#fed906;
			font-size: 25/100rem;
			text-align: center;
			line-height: 50/100rem;
			float: left;
		}
		.info{
			color:#171818;
			font-family: Helvetica Regular;
			float: left;
			height:50/100rem;
			margin-top: 20/100rem;
			margin-left: 30/100rem;
			img{
				width:80/100rem;
				height:80/100rem;
				float: left;
			}
			.letter{
				font-size: 36/100rem;
				vertical-align:top;
				display: inline-block;
				margin-top: 10/100rem;
				margin-left: 15/100rem;
				margin-right: 10/100rem;
				float: left;
			}
			.tiao{
				display: inline-block;
				width: 354/100rem;
				height: 5/100rem;
				border-radius: 40/100rem;
				background:#ffffff;
				display: inline-block;
				margin-top: 30/100rem;
				margin-right: 10/100rem;
				vertical-align:top;
				float: left;
				position: relative;
				.black-tiao{
					position: absolute;
					left: 0;
					top: 0;
					width: 345*0.8/100rem;
					height: 5/100rem;
					border-radius: 40/100rem;
					background-color:#171818;
				}
				.wen-ben{
					position:absolute;
					top:20/100rem;
					left: 20/100rem;
					font-size:24/100rem;
					color:#171818;
					font-family: Helvetica Regular;
				}
  		}
  	}
  }
  .circle{
    height: 500/100rem;
    width: 100%;
    background: pink;
  }
  .separate-line{
    height: 15/100rem;
    width: 100%;
    background: rgb(239,239,239);
  }
  .active{
    h2{
      color:#171818;
			margin-top: 25/100rem;
			font-size: 34/100rem;
			margin-left:20/100rem;
    }
  }
}

</style>
